<template>
  <div class="d-flex justify-center align-center" v-if="content?.renew">
    <i18n-t
      keypath="dialog.premiumRenew.content.text"
      tag="div"
      class="text-white font-size-16 font-style-normal font-weight-500 line-height-140"
    >
      <template #highlight>
        <span class="text-primary">{{ $t('common.premium') }}</span>
      </template>
    </i18n-t>
  </div>
  <div v-else class="tip gap-col-8">
    <div class="line gap-row-8">
      <Icon size="20" name="checkActive"></Icon>
      <i18n-t
        keypath="dialog.premium.content.1.text"
        tag="div"
        class="text-white font-size-14 font-style-normal font-weight-400 line-height-125 letter-spacing-dot2"
      >
        <template #highlight>
          <span class="text-primary">{{ $t('dialog.premium.content.1.highlight') }}</span>
        </template>
      </i18n-t>
    </div>
    <div class="line gap-row-8">
      <Icon size="20" name="checkActive"></Icon>
      <PremiumStar size="20"></PremiumStar>
      <i18n-t
        keypath="dialog.premium.content.4.text"
        tag="div"
        class="text-white font-size-14 font-style-normal font-weight-400 line-height-125 letter-spacing-dot2"
      >
        <template #highlight>
          <span class="text-primary">{{ $t('dialog.premium.content.4.highlight') }}</span>
        </template>
      </i18n-t>
    </div>
    <div class="line gap-row-8">
      <Icon size="20" name="checkActive"></Icon>
      <i18n-t
        keypath="dialog.premium.content.2.text"
        tag="div"
        class="text-white font-size-14 font-style-normal font-weight-400 line-height-125 letter-spacing-dot2"
      >
        <template #highlight>
          <span class="text-primary">{{ $t('dialog.premium.content.2.highlight') }}</span>
        </template>
      </i18n-t>
    </div>
    <div class="line gap-row-8">
      <Icon size="20" name="checkActive"></Icon>
      <i18n-t
        keypath="dialog.premium.content.3.text"
        tag="div"
        class="text-white font-size-14 font-style-normal font-weight-400 line-height-125 letter-spacing-dot2"
      >
        <template #highlight>
          <span class="text-primary">{{ $t('dialog.premium.content.3.highlight') }}</span>
        </template>
      </i18n-t>
    </div>
  </div>
</template>
<script setup>
import { storeToRefs } from 'pinia'
import { usePopupDialogStore } from '@/store/popup-dialog'
import PremiumStar from '@/components/common/PremiumStar.vue'
import { useConfirmData } from '@/compositions/dialog/confirm-data'

const { content } = storeToRefs(usePopupDialogStore())
useConfirmData(() => ({ amount: content.value.amount }))
</script>
<style scoped lang="scss">
.tip {
  display: flex;
  flex-direction: column;

  .input {
    height: 2.5rem;
    padding: 0.5rem 1rem;
    border-radius: 0.625rem;

    input {
      width: 100%;
      outline: none;
    }
  }
}

.line {
  display: flex;
  align-items: center;
  align-self: stretch;
}
</style>
